<template>
  <div
    class="cms-favorites-read absolute h-[52px] w-full bg-white left-0 bottom-0 right-0 px-4 flex items-center justify-between"
    :class="`style_${type}`"
  >
    <button class="w-[163px] h-8 collect-btn text-sm text-[#484a4d] font-medium">收藏</button>
    <button class="w-[163px] h-8 text-sm read-btn font-medium">阅读</button>
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'

const props = withDefaults(defineProps<{ type: number }>(), { type: 1 })
</script>

<style scoped lang="less">
.cms-favorites-read {
  &.style_1 {
    button {
      @apply border-0 rounded-2xl;
    }
    .collect-btn {
      background: #f6f8fb;
    }
    .read-btn {
      background: #ff613f;
      @apply text-white;
    }
  }
  &.style_2 {
    button {
      @apply rounded-2xl;
    }
    .collect-btn {
      background: #fcfcfc;
      border: 1px solid rgba(222, 222, 222, 1);
    }
    .read-btn {
      background: #fff1ee;
      border: 1px solid rgba(255, 97, 63, 1);
      color: #ff613f;
    }
  }
  &.style_3 {
    .collect-btn {
      background: #ffffff;
      border: 1px solid rgba(222, 222, 222, 1);
    }
    .read-btn {
      background: #ffffff;
      border: 1px solid rgba(255, 97, 63, 1);
      color: #ff613f;
    }
  }
}
</style>
